<template>
	<div id='page__goods-detail'>
		<header class="page__header">
			<h2 class="page__title">{{title}}</h2>
		</header>
		<div class="container__goods-detail">
			<div class="detail-left">
				<el-carousel
					indicator-position="outside"
					height="375px">
					<el-carousel-item
						v-for="item in imgList"
						:key="item.id"
					>
						<el-image
							style="width: 100%; height: 100%"
							fit="contain" :src="item.img"></el-image>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="detail-right">
				<h2 class="page__title">{{title}}</h2>
				<p class="goods__desc">{{desc}}</p>
				<p class="goods__price">¥ {{goods.price}} <span class="goods__count">已售 {{goods.sellCount}}</span></p>
				<div class="goods-options">
					<div class="option-item">
						<p class="option-title">选择地址</p>
						<div class="option-content option-address">
							<div class="address-operate">
								<span class="address">{{address}}</span>
								<el-link
									style="font-size: 12px"
									href="#/user/info"
									target="_blank"
									type="primary"
									:underline="false"
								>修改
								</el-link>
							</div>
						</div>
					</div>
					<div class="option-item">
						<p class="option-title">选择数量</p>
						<div class="option-content">
							<el-input-number
								v-model="form.count"
								size="small"
								:min="1"
								:step="1"
								:step-strictly="true"
								label="label"></el-input-number>
						</div>
					</div>
				</div>
				<div class="button">
					<el-button
						type="warning"
						@click="addCart"
					>{{isModify ? '确认修改' : '加入购物车'}}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  import {mapState} from 'vuex'

  export default {
    name: "detail",
    data() {
      return {
        loading: false,
        goods: {},
        form: {
          count: 1
        }
      }
    },
    computed: {
      ...mapState([
        'userInfo'
      ]),
      title() {
        let {name} = this.goods
        if (!name) return '正在获取商品名称'
        return name
      },
      desc() {
        let {brandName, paramsName, paramsValue} = this.goods
        let texts = []
        if (brandName) {
          texts.push(brandName)
        }
        if (paramsName && paramsValue) {
          texts.push(paramsValue + paramsName)
        }
        if (texts.length) return texts.join('/')
        return '暂无描述'
      },
      address() {
        let {province = '', city = '', area = '', address = ''} = this.userInfo
        return province + city + area + address
      },
      imgList() {
        let {imgList = []} = this.goods
        return imgList || []
      },
      isModify() {
        let goods = this.goods
        return goods.cartCount > 0
      }
    },
    watch: {
      $route: {
        deep: true,
        immediate: true,
        async handler({query}) {
          this.loading = true
          this.goods = await this.$store.dispatch('getGoodsInfo', query)
          this.form.count = this.goods.cartCount || 1
          this.loading = false
        }
      }
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {
      addCart() {
        let {id, cartId} = this.$route.query
        let goods = this.goods,
          form = this.form
        this.$axios.post('/cart/save', {
            goodsId: id,
            createGoodsPrice: goods.price,
            goodsCount: form.count,
            id: cartId
          })
          .then(({success, message}) => {
            if (success) {
              this.$message.success(goods.cartCount > 0 ? '修改成功' : '加购成功')
              this.$router.push({
                path: '/cart'
              })
            } else {
              this.$message.error(message)
            }
          })
          .catch(({message}) => {
            this.$message.error(message)
          })
      }
    }
  }
</script>

<style lang='less'>
	#page__goods-detail {
		flex-grow: 1;
		margin-top: 20px;
		background-color: #fff;
		min-height: 360px;

		.page__header {
			padding: 0 20px;
			background-color: #fff;
		}


		.container__goods-detail {
			display: flex;
			padding: 50px 0;

			.detail-left {
				width: 50%;
				padding-left: 20px;
				height: 100%;
			}

			.detail-right {
				width: 50%;
				padding: 0 20px 0 50px;
				box-sizing: border-box;
			}

			.goods__desc {
				color: #b0b0b0;
				font-size: 13px;
			}

			.goods__count {
				color: #666;
				font-size: 13px;
			}

			.goods__price {
				font-size: 20px;
				color: #E6A23C;
				padding: 0 10px 0 0;
			}

			.button {
				margin-top: 20px;
			}

			.option-item {
				border-bottom: 1px solid #eee;
				padding: 20px 0;

				.option-title {
					font-size: 13px;
					color: #666;
					margin-top: 0;
				}
			}

			.option-address {
				padding: 12px 12px 12px 0;
				background-color: #fafafa;
				border: 1px solid #eee;
				color: #666;
				display: flex;

				&:before {
					content: "";
					width: 16px;
					height: 100%;
				}


				.address {
					/*display: inline-block;*/
					margin: 0;
					font-size: 14px;
					line-height: 18px;
					vertical-align: middle;
				}

				.el-link {
					display: inline-block;
					margin-left: 16px;
					line-height: 18px;
					vertical-align: middle;
				}
			}

		}
	}
</style>
